// 在这里写 html vue基础语法
<template>
  <div>
    {{ num }}
    <button @click="addNum" class="active">父组件+1</button>

    <!-- 3. 使用组件 -->
    <List title="哈哈" :arr="arr1" />
    <List title="嘻嘻" :arr="arr2"></List>
    <List title="嘻嘻" :arr="arr2"></List>

    <Counter :num="num" @qwe="addNum"/>

  </div>
</template>


// 写js 
<script>
// 使用组件 三大步
// 1. 引入
import List from "./components/List.vue";
import Counter  from './components/Counter.vue'
// 组件通信
// 父子通信
// 1. 在组件使用的时候  <组件名称 自定义属性="值"/>
// 2. 在子组件内部  通过  props: ['自定义属性']


// 子父通信
// 1. 在组件使用的时候 <组件名称 自定义事件="函数" />
// 2. 在子组件内容  通过  vue.$emit('自定义事件', 参数1, 参数2...)
export default {
  data() {
    return {
      num: 1,
      arr1: ['a', 'b', 'c', 'd'],
      arr2: [1, 2, 3, 4, 5]
    };
  },
  // 2. 注册组件
  components: {
    List,
    Counter
  }, 
  methods: {
    addNum(num) {
      this.num += num
    }
  }
};
</script>

// 写样式
// scoped 开启css 局部作用域
<style scoped lang="scss">
button {
  color: red;
  &.active{
    background: skyblue;
  }
}
</style>